import less from "less";
<style lang=less scoped>
	@import "../../variables.less";

	.steps {
		.step {
			padding: @bigSpace;

			&:not(:last-child):before {
				content: "";
				display: block;
				width: 1px;
				border-left: 1px solid @lightTitleBackground;
				position: absolute;
				left: 24px;
				top: 35px;
				bottom: -1*@bigSpace;
			}

			.stepNumber {
				display: inline-block;
				font-size: @fontSizeC;
				line-height: 2;
				width: 2 * @fontSizeC;
				height: 2 * @fontSizeC;
				border-radius: 50%;
				background-color: @lightTitleBackground;
				text-align: center;
				margin-right: @middleSpace;
			}

			.detail {
				margin-left: 30px;
				border: 1px solid lighten(@infoBlockBackground, 30%);
				border-radius: 5px;
				padding: @smallSpace;

				ul {
					line-height: 2;

					label {
						display: inline-block;
						width: 80px;
						text-align: justify;
						text-align-last: justify;
						float: left;
					}

					li > span {
						margin-left: 100px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						display: block;
					}

					> li:first-child:after {
						content: "";
						display: block;
						width: 100%;
						height: 1px;
						position: absolute;
						bottom: 0;
						border-bottom: 1px solid lighten(@infoBlockBackground, 30%);
					}
				}
			}
		}
	}
</style>
<template>
	<div style="flex-grow: 1;overflow: auto">
		<ul class="steps">
			<li :key="i.name" class="ivu-timeline-item step" v-for="(i,index) in step">
				<span class="stepNumber">{{index+1}}</span>
				<span>{{i.name}}</span>
				<br />
				<div :key='j.completeTime' class="detail" v-for="j in i.apart">
					<ul>
						<li class=clearfix><label>操作者</label><span>{{j.operator}}</span></li>
						<li class=clearfix><label>操作时间</label><span>{{j.completeTime|getTIme}}</span></li>
						<li class=clearfix><label>描述</label><span>{{j.description}}{{j.how?("，解决建议："+j.how):""}}</span>
						</li>
						<li class=clearfix><label>文件</label>
							<span><operation-file-list :files="j.doc" /></span>
						</li>
						<li class=clearfix><label v-if="j.how">解决建议</label><span>{{j.how}}</span></li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import moment from "moment";
	import OperationFileList from "@/components/fileList/operationFileList.vue";

	interface steps {
		name:string,
		apart?:{
			completeTime:number
			description:string,
			doc:{
				filetype:string
				fileurl:URL,
				name:string,
				shortname:string
			}[],
			how?:string
			operator:string
			voice?:string
		}
	}

	@Component({
		components: { OperationFileList },
		filters: {
			getTIme (value:Number | null):string {
				if (typeof value === "number") {
					return moment(value * 1000).format("YYYY年MM月DD日");
				} else {
					return "";
				}
			}
		}
	})
	export default class OperationStep extends Vue {
		@Prop(Array) readonly step?:steps[];
		private MainLink:HTMLLinkElement = document.createElement("link");

		mounted ():void {
			this.renderCss();
		}

		@Watch("$store.state.baseColor")
		onColorChange () {
			this.renderCss();
		}

		beforeDestroy () {
			this.MainLink && this.MainLink.remove();
		}

		private renderCss () {
			less.render("@infoBlockBackground: rgba(red(@baseColor), green(@baseColor)/2, blue(@baseColor)/2, .8);@lightTitleBackground: rgba(0, green(@baseColor)/2, blue(@baseColor)/2, .6);.steps{.step{&:not(:last-child):before{border-left: 1px solid @lightTitleBackground;}.stepNumber{background-color: @lightTitleBackground;}.detail{border: 1px solid lighten(@infoBlockBackground, 30%); ul{> li:first-child:after{border-bottom: 1px solid lighten(@infoBlockBackground, 30%);} }} }}", {
				javascriptEnabled: true,
				modifyVars: {
					"@baseColor": this.$store.state.baseColor,
					"path": "/static/UnityWeb/desktop/"
				},
				paths: [ "/static/UnityWeb/desktop/" ]
			}).then(({ css }) => {
				this.MainLink && this.MainLink.remove();
				const href:string = URL.createObjectURL(new Blob([ css ]));
				const link = document.createElement("link");
				link.href = href;
				link.rel = "stylesheet";
				document.head.appendChild(link);
				this.MainLink = link;
			});
		}
	}

</script>
